<template>
  <div class="shade" :class="isShade?'showShade':''" ref="shade">
    <div class="close" @click="close"/>
    <div class="shade-child maneuvering-area">
      <p>操作区域</p>
      <div class="maneuvering-btns">
        <el-button type="primary" @click="editAutoPlay">开启自动播放</el-button>
        <el-button type="primary" @click="getMP3List">获取歌单</el-button>
        <el-button type="primary" @click="setRandomBackground">切换背景</el-button>
        <el-button type="primary" @click="randomGetUrl">随机播放</el-button>
        <el-button type="primary" @click="autoSetRandomBackground">开启自动轮播背景</el-button>
        <el-input
          placeholder="请输入内容"
          v-model="songName"
          class="input"
          @change="searchMusic"
          clearable>
        </el-input>
      </div>
    </div>
    <div class="shade-child song-area">
      <p>
        歌曲列表/共{{ mp3List.length }}首/
      </p>
      <div class="song-list">
        <ul class="musicUl" v-highlighting="musicliIndex" v-show="mp3List.length>0">
          <li class="musicli" v-for="(item, index) in mp3List" :key="item._id" @click="geturl(item, index)">
            <div class="musicli-singer">歌手：{{ item.singer }}</div>
            <div class="musicli-singName">歌曲：{{ item.music_name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'shade',
  data(){
    return{
      isShade: true,
      mp3List: [],
      songName: '',
      isAutoSetBackimg: false,
      timer: null,
      musicliIndex: null,
    }
  },
  props:['songlist', 'songIndex'],
  watch:{
    songlist(newV, oldV){
      if(newV.length > 0){
        this.mp3List = newV;
      }
    },
    songIndex(newV){
      this.musicliIndex = newV
    },
    isAutoSetBackimg(newV){
      if(newV){
        this.timer = setInterval(()=>{
          this.setRandomBackground()
        }, 10000)
      }else{
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  },

  methods:{
    close(){
      this.isShade = !this.isShade
    },
    searchMusic(){
      this.$emit('searchMusic', this.songName)
    },
    editAutoPlay(){
      this.$emit('editAutoPlay');
    },
    getMP3List(){
      this.$emit('getMP3List')
    },
    geturl(data, index){
      this.musicliIndex = index
      let item = Object.assign(Object.create({}), data, {'index': index}) 
      this.$emit('geturl', item)
    },
    setRandomBackground(){
      this.$emit('setRandomBackground')
    },
    randomGetUrl(){
      this.$emit('randomGetUrl', true)
    },
    autoSetRandomBackground(){
      this.isAutoSetBackimg = !this.isAutoSetBackimg
    }
  }
}
</script>

<style lang="scss" scoped>
.shade{
  position: absolute;
  width: 40%;
  height: 100%;
  padding: 14px;
  background: rgba($color: #000000, $alpha: 0.6);
  z-index: 999;
  border-radius: 10px 0px 0px 10px;
  right: 0px;
  color: #fff;
  font-size: 20px;
  transition: all .4s;
  .close{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
  }
  .maneuvering-area{
    height: 40%;
    border-bottom: 1px solid #fff;
  }
  .song-area{
    height: 57%;
    overflow: hidden;
    .song-list{
      height: calc(100% - 80px);
      overflow: auto;
      position: relative;
      .musicUl{
        position: absolute;
        top: 0px;
        // height: calc(100% - 80px);
        // overflow-y: scroll;
        // padding: 10px;
        // user-select: none;
        .musicli{
          list-style: none;
          padding: 10px 0px;
          height: 68px;
          text-indent: 20px;
          font-size: 18px;
          border-bottom: 1px solid #fff;
          font-weight: bold;
        }
      }
    }
  }

}

.showShade{
  width: 60px;
  height: 50px;
  background: rgba($color: #000000, $alpha: 0.2);
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 16px;
  overflow: hidden;
  .close{
    background-color: green;
  }
}

.input{
  width: 200px;
  margin-left: 20px;
}
</style>